/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import Icon from '@/components/icon';
import { getUserDetail, getHistoryRoom } from '@/services/index';
import history from '@/router/history';
import { Button } from 'antd';
import Table from '@/components/table';
import css from './index.module.less';

const columns:any = [
  {
    title: '排行',
    align: 'center',
    key: 'center',
    render: (text:any, record:any, index:number) => (<span>{index + 1}</span>),
  },
  {
    title: '直播',
    dataIndex: 'title',
    align: 'center',
    key: 'title',
    render: (text:any, record:any, index:number) => {
      return (
        <div className={css.titlebox}>
          <img src={record.cover} alt="" />
          <span>{record.title}</span>
        </div>
      );
    },
  },
  {
    title: '销量（件）',
    dataIndex: 'sell_num',
    align: 'center',
    key: 'sell_num',
  },
  {
    title: '销售额（元）',
    align: 'center',
    dataIndex: 'gmv',
    key: 'gmv',
  },
  {
    title: '带货热度',
    dataIndex: 'total_count',
    align: 'center',
    key: 'total_count',
  },
  {
    title: '人气峰值',
    dataIndex: 'max_online',
    align: 'center',
    key: 'max_online',
  },
  {
    title: '商品数',
    dataIndex: 'product_num',
    align: 'center',
    key: 'product_num',
  },
];

const User = (props:any) => {
  const [detail, setDetaul] = useState<any>();
  const [list, setList] = useState<any>();
  const [loading, setLoding] = useState<any>(false);
  const { match } = props;
  useEffect(() => {
    setLoding(true);
    Promise.all(
      [
        getUserDetail({ uid: match.params.id }),
        getHistoryRoom({ uid: match.params.id }),
      ],
    ).then((res) => {
      setLoding(false);
      if (res && res.length > 0) {
        if (res[0].code === 'Success') {
          setDetaul(res[0].data);
        }
        if (res[1].code === 'Success') {
          setList(res[1].data);
        }
      }
    });
  }, [props]);
  return (
    <div className={css.user_center}>
      <div className={css.introduce}>
        <img src={detail?.avatar} alt="" />
        <div className={css.de}>
          <h1>{detail?.nickname}</h1>
          <h2>
            {detail?.signature}
          </h2>
          {/* <h2>
            开播时间:
            {' '}
            {detail?.gmt_create}
            下播时间:
            {' '}
            {detail?.gmt_modified}
          </h2> */}
          <div className={css.cn}>
            <div>
              <h3>{detail?.fs}</h3>
              <h4>粉丝数</h4>
              <h5>超过当日99%的主播</h5>
            </div>
            {/* <div>
              <h3>874000</h3>
              <h4>本场销售额</h4>
              <h5>超过当日99%的主播</h5>
            </div> */}
            <div>
              <h3>{detail?.gz}</h3>
              <h4>关注</h4>
              <h5>超过当日99%的主播</h5>
            </div>
          </div>
        </div>
      </div>
      <div className={css.tablebox}>
        <Table
          loading={loading}
          columns={columns}
          dataSource={list}
        />
      </div>
    </div>
  );
};
export default User;
